<template>
	<view>
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl" :style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class="" :style="{'height': hieght}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'" @click="navToBack" :src="xcxImgUrl && xcxImgUrl+'fanhui.svg'" style="width: 36rpx;height: 36rpx;">
			</image>
			<text :slot="'content'">{{type == 'phoneNumber' ?  '更换手机号' : '修改密码'}}</text>
		</navBar>

		<view class="main_phoneNumber" :style="{'height': 'calc(100vh - ' + demoTopHieght +')'}">
			<view class="main_phoneNumber_title">
				<view class="main_phoneNumber_title_one">
					<image v-show="!imgBgShow" class="main_phoneNumber_title_one_img" style="width: 100%;height: 100%;"
						:src="xcxImgUrl && xcxImgUrl+'page_setting/static/updatePhoneNUmberBg.svg'"></image>
					1.验证手机号码
				</view>
				<view class="main_phoneNumber_title_one">
					<image v-show="imgBgShow" class="main_phoneNumber_title_one_img" style="width: 100%;height: 100%;"
						:src="xcxImgUrl && xcxImgUrl+'page_setting/static/updatePhoneNumberBg1.svg'"></image>
					{{type == 'phoneNumber' ?  '2.更换手机号码' : '2.修改新密码'}}
				</view>
			</view>
			<view class="main_phoneNumber_form">
				<u--form labelPosition="left" :model="userInfo" :rules="rules" labelWidth="220" ref="uForm">
					<u-form-item label="手机号码" prop="phoneNumber" borderBottom v-if="!imgBgShow" ref="item1">
						<u--input maxlength="11" v-model="userInfo.phoneNumber" border="none" type="number"
							placeholder="请输入手机号码"></u--input>
					</u-form-item>
					<u-form-item label="新手机号码" prop="newPhoneNumber" borderBottom
						v-if="imgBgShow && type=='phoneNumber'" ref="item1">
						<u--input maxlength="11" v-model="userInfo.newPhoneNumber" border="none" type="number"
							placeholder="请输入新手机号码"></u--input>
					</u-form-item>
					<u-form-item label="验证码" prop="authCode" borderBottom v-if="(!imgBgShow && type == 'password') ||
						(!imgBgShow && type == 'phoneNumber') || 
						 (imgBgShow && type == 'phoneNumber')" ref="item1">
						<!-- #ifndef APP-NVUE -->
						<u-input border="none" type="number" v-model="userInfo.authCode" placeholder="请填写验证码">
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input border="none" type="number" v-model="userInfo.authCode" placeholder="请填写验证码">
								<!-- #endif -->

								<template slot="suffix">
									<u-code ref="uCode" @change="codeChange" seconds="5" changeText="X秒重新获取"></u-code>
									<view class="tips">
										<view class="line"></view>
										<u-button @tap="getCode" size="mini">{{tips}}</u-button></view>
								</template>
								<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</u-form-item>
					<u-form-item label="新密码" prop="newPassword" borderBottom v-if="imgBgShow && type == 'password'"
						ref="item1">
						<u--input v-model="userInfo.newPassword" border="none" placeholder="请输入新密码"></u--input>
					</u-form-item>
					<u-form-item label="密码二次确认" prop="sureNewPassword" borderBottom
						v-if="imgBgShow && type == 'password'" ref="item1">
						<u--input v-model="userInfo.sureNewPassword" border="none" placeholder="请输入新密码"></u--input>
					</u-form-item>
				</u--form>

				<!-- 操作按钮 -->
				<view style="margin-top: 50rpx;" v-if="!imgBgShow" @click="nextOne">
					<newBtn name='下一步' bgColor="#EC4141" color="#FFF"></newBtn>
				</view>
				<view style="margin-top: 50rpx;" v-if="imgBgShow" @click="save">
					<newBtn name='完成' bgColor="#EC4141" color="#FFF"></newBtn>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import newBtn from '@/components/newBtn/newBtn.vue'
	import {
		updateMallMemberInfo
	} from "@/api/setting.js"
	import {
		sendVerificationCode
	} from "@/api/global.js"
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			newBtn
		},
		computed: {
			...mapGetters(['demoTopHieght']),
		},
		data() {
			return {
				statusBarHeight: '',
				hieght: '',
				imgBgShow: false,
				userInfo: {
					phoneNumber: '', //手机号
					authCode: '', //验证码
					newPhoneNumber: '', //新手机号
					newPassword: '', //密码
					sureNewPassword: '', //新密码
				},
				tips: '获取验证码',
				rules: {
					'phoneNumber': [{
							type: 'string',
							required: true,
							message: '请输入手机号码',
							trigger: ['blur', 'change']
						}, {
							len: 11,
							message: '手机号码长度为11位',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								console.log(this.oldPhone,value)
								if (this.oldPhone != value) {
									return false
								}
								return true
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								// return uni.$u.test.mobile(value);
							},
							message: '手机号码和绑定手机号码不一致',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'newPhoneNumber': [{
							type: 'string',
							required: true,
							message: '请输入新手机号码',
							trigger: ['blur', 'change']
						}, {
							len: 11,
							message: '新手机号码长度为11位',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '新手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'authCode': [{
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					}],
					'newPassword': [{
						type: 'string',
						required: true,
						message: '请输入新密码',
						trigger: ['blur', 'change']
					}],

					'sureNewPassword': [{
							type: 'string',
							required: true,
							message: '请输入确认新密码',
							trigger: ['blur', 'change']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								if (this.userInfo.newPassword != value) {
									return false
								}
								return true
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								// return uni.$u.test.mobile(value);
							},
							message: '两次密码不一致',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				type: 'phoneNumber', //默认修改手机号码 phoneNumber or password
				oldPhone: '', //老手机号
				markPhone: true, //标记当前操作是哪一步的手机好 true 旧手机号 false 新手机号
			};
		},
		onReady(){
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			//接收是操作修改手机号还是修改密码 phoneNumber or password
			this.type = options.type ? options.type : 'phoneNumber' //默认修改手机号码
			//接受手机号
			this.oldPhone = options.phone ? JSON.parse(options.phone) : ''
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.hieght = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('main_phoneNumber')
			})
		},
		methods: {
			//下一步
			async nextOne() {
				//校验必填
				let config = await this.$refs.uForm.validate()
				if (config) {
					// 区分是修改手机号还是密码
					if (this.type == 'phoneNumber') { //修改手机号
						//调用提交完成接口
						this.saveSubmit(1)
					} else { //修改密码
						//调用提交完成接口
						this.saveSubmit(1)
					}
				}


			},
			//完成
			async save() {
				//校验必填
				let config = await this.$refs.uForm.validate()
				if (config) {
					// 区分是修改手机号还是密码
					if (this.type == 'phoneNumber') { //修改手机号
						//调用提交完成接口
						this.saveSubmit(2)
					} else { //修改密码
						//调用提交完成接口
						this.saveSubmit(2)
					}
				}
			},
			/* 
			提交保存接口
			mark 1 修改前 2 完成
			 */
			async saveSubmit(mark) {
				let res = await updateMallMemberInfo({
					phone: mark == 1 ? this.userInfo.phoneNumber : this.userInfo.newPhoneNumber,
					password: this.type == 'password' && mark == 2 ? this.$md5(this.userInfo.sureNewPassword)
						.toUpperCase() : '',
					verificationCode: this.userInfo.authCode,
					markTag: mark
				})
				console.log(res)
				if (res.code == 2000) {
					// 修改前
					if (mark == 1) {
						// 点击下一步切换按钮显示
						this.imgBgShow = true
						//清空验证码
						this.userInfo.authCode = ''
						//清空校验
						this.$nextTick(() => {
							this.$refs.uForm.resetFields(this.rules)
						})
						// 重置获取验证码提示词
						this.tips = '获取验证码'
						//标记是新手机号还是旧手机号
						this.markPhone = false
					}
					//完成
					if (mark == 2) {
						this.Utils.toast(`修改成功`)
						uni.removeStorageSync('visitorLoginInfo')
						uni.removeStorageSync('visitorAccessToken')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/login?type=outLogin'
							})
						}, 500)
						// setTimeout(()=>{
						// 	uni.navigateTo({
						// 		url:'/page_setting/settingHome'
						// 	})
						// },500)
					}
				} else {
					this.Utils.toast(`${res.msg}`)
				}


			},
			//返回上一级
			navToBack() {
				uni.navigateTo({
					url: '/page_setting/settingHome'
				})
			},
			codeChange(text) {
				console.log(text);
				this.tips = text;
			},
			getCode() {
				this.$refs.uForm.validateField('phoneNumber', (res) => {
					if (res.length == 0) {
						if (this.$refs.uCode.canGetCode) {
							// 模拟向后端请求验证码
							uni.showLoading({
								title: '正在获取验证码'
							})
							sendVerificationCode({
								phone: this.markPhone ? this.userInfo.phoneNumber : this.userInfo
									.newPhoneNumber,
								tag: 2
							}).then(resr => {
								if (resr.code == 2000) {
									uni.hideLoading();
									// 这里此提示会被this.start()方法中的提示覆盖
									uni.$u.toast('验证码已发送');
									// 通知验证码组件内部开始倒计时
									this.$nextTick(() => {
										this.$refs.uCode.start();
									})
								} else {
									uni.hideLoading();
									this.Utils.toast(`${resr.msg}`)
								}

							})

						} else {
							uni.$u.toast('倒计时结束后再发送');
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tips {
		position: relative;
		.line{
			position: absolute;
			left:0;
			top:12rpx;
			width:2rpx;
			height:20rpx;
			background-color: #ccc;
		}
		/deep/.u-button {
			color: #EC4141 !important;
			font-size: 24rpx !important;
			border: none !important;
			background-color: transparent!important;
		}
	}

	.main_phoneNumber {
		width: 100%;
		box-sizing: border-box;

		.main_phoneNumber_title {
			width: 100%;
			height: 88rpx;
			display: flex;
			align-items: center;

			.main_phoneNumber_title_one {
				width: 50%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: $text_color_333;
				font-size: $font_size_14;
				position: relative;

				.main_phoneNumber_title_one_img {
					position: absolute;
					left: 0;
					bottom: 0;
					z-index: -1;
				}
			}


		}

		.main_phoneNumber_form {
			padding: 60rpx;
		}
	}

	/deep/.u-form-item__body {
		flex-direction: column !important;
	}

	/deep/.u-form-item__body__left__content__label {
		font-size: 32rpx;
		color: $text_color_333;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	/deep/.u-form-item__body__right__message {
		margin-left: 0 !important;
	}
</style>